<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
<!--  //插值表达式-->
<!--  <p>{{ title }}</p>-->
<!--  <p>{{ content }}</p>-->
<!--  <p>{{output()}}</p>-->
<!--  <p>{{output()}}</p>-->
<!--  <p>{{output()}}</p>-->
<!--  <p>{{outputContent}}</p>-->
<!--  <p>{{outputContent}}</p>-->
<!--  <p>{{outputContent}}</p>-->
<!--  指令-->
<!--  内容指令-->
  <p v-text="htmlText"></p>
  <p v-html="htmlText"></p>
<!--  渲染指令-->
  <p v-for="item in 5">这是内容{{item}}</p>
  <p v-if="false">内容</p>
  <p v-show="true">show内容</p>
<!--  属性指令-->
  <p v-bind:title="title">123</p>
  <p :title="title">123</p>
<!--  事件指令-->
  <button v-on:click="output">按钮</button>
  <button @click="output">按钮</button>
<!--  表单指令 双向绑定-->
  <input type="text" v-model= "inputValue">
  <p v-text="inputValue"></p>
</div>

<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    //1.响应式数据与插值表达式
    el: '#app',
    data(){
      return {
        title :"这是标题",
        content: "这是内容",
        htmlText: "<h1>哈哈</h1>",
        inputValue: "默认内容",

      }
    },
    //函数属性
    methods:{
      output(){
        console.log("output执行了")
        return '标题为' + this.title + "," + "内容为" + this.content
      }
    },
    //计算属性
    computed:{
      outputContent(){
        console.log("outputContent执行了")
        return '标题为' + this.title + "," + "内容为" + this.content
      }
    },
    //侦听器
    watch:{
      title(newValue,oldValue){
        console.log(newValue,oldValue)
      }
    }
  })
</script>

</body>
</html>